<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<link rel="stylesheet" href="../assets/third/datepicker/lCalendar.css">
		<style>
			.titlebar,.tab.active{
				background-color:#18B2ED;
			}
			.titlebar h1,.tab.active label{
				font-weight:bold;
				color:white;
			}
			.titlebar a i,.titlebar a label{
				color:white;
			}
			.art_mid{
				top:45px;
				bottom:40px
			}
			article span{
				font-size:1.5em
			}
		</style>
	</head>
	<body>
		<div id="section_container">
		 <section id="sectionid" data-role="section" class="active">
		 	<header>
		 		<div class="titlebar" >
		 			<a class="left">
		 				<label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label>
		 			</a>
		 			<h1 class="text-center ">首页</h2>
		 			<a class="right">
		 				<i class="icon icon-menu-fill"></i>
		 			</a>
		 		</div>
		 	</header>
		 	<article id="article_main" data-role="article" data-transition="slide" data-scroll="verticle"  class="active art_mid" >
		 		<div class="scroller">
		 		<div id="form" >
		 			<div v-for="item in formData" class="input-box width-full" style="height:40px">
		 			<label style="width:20%;display: block;">{{item}} : </label>
		 			<!--下拉-->
		 			<select v-if="item=='sex'" v-model="formbean[item]" style="padding:0;margin-left:-5px;height:auto">
		 				<option value="" disabled selected >-请选择-</option>  
		 				<option v-for="i in sexbean" v-bind:value="i.code"  >{{i.name}}</option>
		 			</select>
		 			<!--多选-->
		 			<div v-else-if="item=='like'" v-for="i in likes"  style="padding:5px">
		 				<input type="checkbox" :id="i.code" :value="i.code" v-model="formbean[item]">
		 				</input><label :for="i.code">{{i.name}}</label>
		 			</div>
		 			<!--时间-->
		 			<input v-bind:name="item" v-model="formbean[item]" v-else-if="item=='date'" readonly="true" @tap="getDate(item)"></input>
		 			<!--select多选-->
		 			<select v-else-if="item=='multiple'" multiple="multiple" v-model="formbean[item]" style="height:100px">
		 				<option v-for="i in likes" v-bind:value="i.code">{{i.name}}</option>
		 			</select>
		 			<input v-bind:name="item" v-model="formbean[item]" v-else></input>
		 			</div>
		 			<br /><span @click="save" class="button bg-6 block">save</span>
		 			<br />
		 			<hr /><br />
		 				<template v-for="key in formData">
		 				  {{key}}:  {{formbean[key]}}<br/>
		 				</template>
		 		</div>
		 		</div>
		 	</article>
		 	<article id="article_serv"  data-role="article" data-transition="slide"  class="art_mid" >
		 		<div id="tree" style="padding:5px">
		 		<a data-toggle="view" href="#sub1" data-istoggle="true" class="active"><span >root</span></a>
		 			<ul id="sub1" data-role="view"  style="position:relative;left:5px" class="">
		 				<li><span>item</span></li>
		 				<li><span>item</span></li>
		 				<li>
		 					<a data-toggle="view" href="#sub2" data-istoggle="true"><span >item</span></a>
		 					<ul id="sub2" data-role="view"  style="position:relative;left:5px">
		 				      <li><span>item-1</span></li>
		 				      <li><span>item-2</span></li>
		 					</ul>
		 				</li>
		 				<li>
		 					<a data-toggle="view" href="#sub3" data-istoggle="true"><span >item</span></a>
		 					<ul id="sub3" data-role="view"  style="position:relative;left:5px">
		 				      <li><span>item-1</span></li>
		 				      <li><span>item-2</span></li>
		 					</ul>
		 				</li>
		 			</ul>
		 		</div>
		 	</article>
		 	<article id="article_conf" data-role="article" data-transition="slide" class="art_mid" >
		 		<table id="table_main">
		 			<tr>
		 				<td v-for="col in formData" class="bold">{{col}}</td>
		 			</tr>
		 			<tr v-for="item in list">
		 				<td v-for="col in formData">{{item[col]}}</td>
		 			</tr>
		 		</table>
		 	</article>
		 	<footer>
				<ul class="menubar" style="line-height: 40px;">
					<li class="tab active" data-role="tab" href="#article_main" data-toggle="article">
						<label class="text-center">首页</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_serv" data-toggle="article">
						<label class="text-center">tree</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_conf" data-toggle="article">
						<label class="text-center">tabel</label>
					</li>
				</ul>
		 	</footer>
		 </section>
		</div>
		<script src="../assets/bridge/exmobi.js" ></script>
		<script src="../assets/bridge/agile.exmobi.js" ></script>
		<script src="../assets/third/amd/require.js" ></script>
		<script src="../assets/app/js/app.require.js"></script>
		<script>
		var isbridge = false
         //本地能力
         document.addEventListener("plusready", onPlusReady, false);
         function onPlusReady() {
         	if(!isbridge){
         	 isbridge = true
         	 //var bs64 = EncryptionUtil.imageToBase64({imagePath:"res:page/www/img/me.jpg"})
         	}
         }
		 require(['vue','agile','datepicker'],function(Vue){
		 	var bean ={
		 		id:'1',
		 		name:'张三',
		 		sex:'',
		 		age:18,
		 		like:["2","3"],
		 		hellow:"hill",
		 		date:"",
		 		multiple:["1","4"]
		 	}
		 	
		 	var formVM = new Vue({
		 		el:'#form',
		 		data:{
		 			formbean:{},
		 			formData:[],
		 			sexbean:[{code:'1',name:'男'},{code:'2',name:'女'},{code:'3',name:'其他'}],
		 			likes:[
		 			{code:'1',name:'读书'},
		 			{code:'2',name:'旅游'},
		 			{code:'3',name:'运动'},
		 			{code:'4',name:'电影'}
		 			]
		 		},
		 		methods:{
		 			initform:function(data){
		 				this.formbean = data
		 				for(key in data){
		 					this.formData.push(key)
		 				}
		 			},
		 			hellow:function(){
		 				alert('hellow '+this.formbean.name+' !')
		 			},
		 			save:function(){
		 				alert(JSON.stringify(bean))
		 			},
		 			getDate:function(key){
		 				//editDate(event,this.formbean,key)
		 				editDatetime(event,this.formbean,key)
		 			}
		 		},created:function(){
		 		}
		 	})
		 	
		 	
		 	//针对tabel的渲染不建议这样做
		 	//建议少用table
		 	var tableVM = new Vue({
		 		el:'#table_main',
		 		data:{
		 			list:[{
		 		          id:'1',
		 		          name:'张三',
		 		          sex:'1',
		 		          age:18
		 	             },{
		 		          id:'2',
		 		          name:'李四',
		 		          sex:'2',
		 		          age:11
		 	             },{
		 		          id:'3',
		 		          name:'王五',
		 		          sex:'2',
		 		          age:15
		 	             }],
		 			formData:[]
		 		},
		 		methods:{
		 			initform:function(data){
		 				 ;
		 			}
		 		},created:function(){
		 			var tjson = this.list[0]
		 			for(key in tjson){
		 				this.formData.push(key)
		 			}
		 		}
		 	})
		 	
		 	
		 	formVM.initform(bean)
		 });
		</script>
	</body>
</html>